<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" circular
			next-margin="40px" @change="swierChange">
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" :class="[currentIndex==i&&'active-image']"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "swiper-3d",
		props: {
			swiperList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				currentIndex: 0,
			};
		},
		methods: {
			swierChange(e) {
				this.currentIndex = e.detail.current
			},
		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 350px;
		// padding-left: 10px;

		.swiper-item {
			height: 100%;
			// margin-left: 10px;
			border-radius: 15px;
			// background-color: pink;

			image {
				position: absolute;
				height: 90%;
				left: 10px;
				bottom: 0;
				z-index: 5;
				top: 5%;
				border-radius: 15px;
				// padding-left: 10px;
			}

			.active-image {
				z-index: 10;
				height: 100%;
				width: 95%;
				transition: all 0.2s;
				top: 0;
				left: 10px;
				border-radius: 15px;
			}
		}
	}
</style>